import React from 'react';
import PropTypes from 'prop-types';
import { useTheme } from '@material-ui/core/styles';
import { useMediaQuery, Grid, Typography, colors } from '@material-ui/core';
import { SectionHeader } from 'components/molecules';
import { CardCategoryLink } from 'components/organisms';

const Categories = props => {
    const { data, className, ...rest } = props;

    const theme = useTheme();
    const isMd = useMediaQuery(theme.breakpoints.up('md'), {
        defaultMatches: true,
    });

    const getColor = (color) => {
        if (color == 'amber') {
            return colors.amber;
        } else if (color == 'blue') {
            return colors.blue;
        } else if (color == 'blueGrey') {
            return colors.blueGrey;
        } else if (color == 'brown') {
            return colors.brown;
        } else if (color == 'common') {
            return colors.common;
        } else if (color == 'cyan') {
            return colors.cyan;
        } else if (color == 'deepOrange') {
            return colors.deepOrange;
        } else if (color == 'deepPurple') {
            return colors.deepPurple;
        } else if (color == 'green') {
            return colors.green;
        // } else if (indigo == 'indigo') {
        //     return colors.indigo;
        } else if (color == 'lightBlue') {
            return colors.lightBlue;
        } else if (color == 'lightGreen') {
            return colors.lightGreen;
        } else if (color == 'lime') {
            return colors.lime;
        } else if (color == 'orange') {
            return colors.orange;
        } else if (color == 'pink') {
            return colors.pink;
        } else if (color == 'purple') {
            return colors.purple;
        } else if (color == 'red') {
            return colors.red;
        } else if (color == 'teal') {
            return colors.teal;
        } else if (color == 'yellow') {
            return colors.yellow;
        } else {
            return colors.grey;
        }
    }

    return (
        <div className={className} {...rest}>
            <SectionHeader
                title={
                    <span>
                        Choose your course by{' '}
                        <Typography color="secondary" variant="inherit" component="span">categories</Typography>
                    </span>
                }
                subtitle="Browse the available course categories, choose your favourite one and start learning."
                fadeUp
            />
            <Grid container spacing={isMd ? 4 : 2}>
                {data.map((item, index) => (
                    <Grid
                        key={index}
                        item
                        container
                        alignItems="center"
                        direction="column"
                        xs={12}
                        sm={6}
                        md={3}
                        data-aos="fade-up"
                    >
                        <CardCategoryLink
                            variant="outlined"
                            align={isMd ? 'left' : 'center'}
                            liftUp
                            title={item.title}
                            subtitle={item.sub_title}
                            href="#"
                            fontIconClass={item.icon}
                            color={getColor(item.color)}
                        />
                    </Grid>
                ))}
            </Grid>
        </div>
    );
};

Categories.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
    /**
     * data to be rendered
     */
    data: PropTypes.array.isRequired,
};

export default Categories;
